<template>
  <div class="hotelList">
    <!-- <img src="@/assets/loading.gif" alt /> -->
    <img class="loading" v-if="loading" src="@/assets/loading.gif" alt />
    <div v-if="data.total !=0">
      <el-row class="item" v-for="item in data.data" :key="item.id">
        <el-col class="cover" :span="8">
          <nuxt-link :to="'hotel/'+item.id+'.html'">
            <img :src="item.photos" alt />
          </nuxt-link>
        </el-col>
        <el-col :span="10">
          <h3>
            <nuxt-link :to="'hotel/'+item.id+'.html'">{{item.name}}</nuxt-link>
          </h3>
          <p>{{item.alias}}</p>
          <el-row class="rate">
            <el-col :span="10">
              <el-rate
                v-model="item.stars"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
              ></el-rate>
            </el-col>
            <el-col :span="7">
              <span>{{item.all_remarks}}</span> 条评价
            </el-col>
            <el-col :span="7">
              <span>{{item.good_remarks}}</span> 篇游记
            </el-col>
          </el-row>
          <div class="localtion">
            <i class="el-icon-location"></i>
            位于: {{item.address}}
          </div>
        </el-col>
        <el-col :span="6">
          <el-table :data="item.products" style="width: 100%" :show-header="false">
            <el-table-column prop="name"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <span class="price">￥{{ scope.row.price }}</span>起
                <i class="el-icon-arrow-right"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-pagination
        layout="prev, pager, next"
        :total="data.total"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <div class="noData" v-else>暂无符合条件的酒店</div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      loading: true,
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.loading = false;
      }
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("sendPage", [{ _start: (val - 1) * 5 }]);
    },
  },
};
</script>

<style lang="less" scoped>
.hotelList {
  min-height: 300px;
  .loading {
    display: block;
    margin: 0 auto;
  }
  .noData {
    text-align: center;
  }
  .item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    .cover {
      img {
        width: 320px;
        height: 210px;
      }
    }
    h3 {
      font-size: 24px;
      font-weight: 400;
    }
    p {
      color: #999;
      margin-bottom: 10px;
    }
    .rate {
      span {
        color: #ffa500;
      }
    }
    .localtion {
      margin-top: 10px;
      color: #666;
      font-size: 14px;
      i {
        vertical-align: middle;
      }
    }
    .price {
      color: #ffa500;
      font-size: 16px;
    }
  }
  .el-pagination {
    text-align: right;
    margin: 10px 0 20px;
  }
}
</style>